import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Swiper, SwiperItem, Navigator, Image } from '@tarojs/components'

import { getProductList } from 'src/api'
import ProductList from 'src/components/ProductList'
import { indexBanner } from 'src/constants'
import withPage from 'src/utils/withPage'

import './index.scss'

type Props = {}

type State = { productList: any[] }

@withPage()
class Index extends Component<Props, State> {
  state = {
    productList: [],
  }

  componentDidMount() {
    this.getProductsList()
  }

  async onPullDownRefresh() {
    await this.getProductsList()
    Taro.stopPullDownRefresh()
  }

  getProductsList = async () => {
    const data = await getProductList()
    this.setState({ productList: data.list })
  }

  render() {
    return (
      <View>
        {indexBanner.length > 0 && (
          <Swiper
            className="swiper"
            indicatorColor="rgba(255,255,255,0.6)"
            indicatorActiveColor="#fff"
            indicatorDots
            autoplay
          >
            {indexBanner.map(({ url, image }, index) => (
              <SwiperItem key={index}>
                <Navigator url={url}>
                  <Image className="banner" src={image} lazyLoad />
                </Navigator>
              </SwiperItem>
            ))}
          </Swiper>
        )}
        <ProductList productList={this.state.productList}></ProductList>
      </View>
    )
  }
}

export default Index
